<div class="layui-card layadmin-header">
  <div class="layui-breadcrumb" lay-filter="breadcrumb">
    <a><cite>运维管理</cite></a>
    <a><cite>用户导入</cite></a>
  </div>
</div>

<div class="layui-fluid">
  <div class="layui-card">
    <div class="layui-card-body">
      <form class="layui-form" id="form_box" enctype="multipart/form-data">
        <script type="text/html" template lay-done="layui.data.done()">
          <div class="layui-form-item">
            <label class="layui-form-label" style="width:100px;">所属代理商</label>
            <div class="layui-input-inline">
              <select name="agent_id" id="agent_id" lay-verify="required" lay-filter="chooseagent">
                <option value="">请选择代理商</option>
              </select>
            </div>
          </div>
          <div class="layui-form-item">
            <label class="layui-form-label" style="width:100px;">所属渠道商</label>
            <div class="layui-input-inline">
              <select name="channel_id" id="channel_id" lay-verify="required">
                <option value="">请选择渠道商</option>
              </select>
            </div>
            <!--                  <div class="layui-form-mid layui-word-aux">此处只是演示联动排版，并未做联动交互</div>-->
          </div>
          <div class="layui-form-item">
            <label class="layui-form-label" style="width:100px;"></label>
            <div class="layui-input-inline" style="position:relative;">
              <button type="button" class="layui-btn" id="test1" style="position:absolute;z-index:10;">
                <i class="layui-icon">&#xe67c;</i>上传导入文件
              </button>
              <a href="/assets/excel/导入模板.xls"
                 style="position:absolute;left:152px;width:80px;top:15px;text-decoration:underline;">下载模版</a>
            </div>
          </div>
          <div class="layui-form-item">
            <label class="layui-form-label"></label>
            <div class="layui-input-block">
              <div class="layui-form-item layui-hide" id="demo-list-box" style="margin-top:25px;">
                <div class="layui-upload-list" style="max-width: 600px;">
                  <table class="layui-table">
                    <colgroup>
                      <col width="300">
                      <col width="150">
                      <col width="250">
                    </colgroup>
                    <thead>
                    <tr>
                      <th>文件名</th>
                      <th>大小</th>
                      <th>操作</th>
                    </tr>
                    </thead>
                    <tbody id="demoList"></tbody>
                  </table>
                </div>
              </div>
            </div>
          </div>

          <div class="layui-form-item" style="padding-top: 20px">
            <div class="layui-input-block">
              <button id="btn_create" class="layui-btn" lay-submit lay-filter="form_create">
                确认导入
              </button>
            </div>
          </div>
        </script>
      </form>
    </div>
  </div>
</div>
<script>
  layui.data.done = function () {

    layui.use(['laydate', 'form', 'admin', 'layer', 'upload'], function () {
      let $ = layui.$
        , form = layui.form
        , admin = layui.admin
        , upload = layui.upload

      let this_file_data = {};

      let uploadInst = upload.render({
        elem: '#test1' //绑定元素
        , elemList: '#demoList'
        , url: 'admin/excelimport' //上传接口
        , exts: 'xls|xlsx|XLS|XLSX'
        , method: 'POST'
        , multiple: true
        , headers: {
          Authorization: admin.getAccessToken('Bearer')
        }
        , choose: function (obj) {
          var that = this;
          var files = this.files = obj.pushFile(); //将每次选择的文件追加到文件队列
          //读取本地文件
          obj.preview(function (index, file, result) {
            $('#demoList').html('');

            var tr = $(['<tr id="upload-' + index + '">'
              , '<td>' + file.name + '</td>'
              , '<td>' + (file.size / 1014).toFixed(1) + 'kb</td>'
              , '<td>'
              , '<button class="layui-btn layui-btn-xs layui-btn-danger demo-delete">删除</button>'
              , '</td>'
              , '</tr>'].join(''));

            //删除
            tr.find('.demo-delete').on('click', function () {
              delete files[index]; //删除对应的文件
              tr.remove();
              uploadListIns.config.elem.next()[0].value = ''; //清空 input file 值，以免删除后出现同名文件不可选
              $('#demoList').html('');
              this_file_data = {};
            });

            $('#demoList').append(tr);
          });
        }
        , done: function (res) {
          if (res.code !== 0) {
            layer.msg(res.msg);
            return false;
          }
          $('#demo-list-box').removeClass('layui-hide');
          this_file_data = res.data;

        }
        , error: function () {
          //请求异常回调
        }
      });

      admin.get('admin/agents', function (res) {
        res.data.forEach(function (item) {
          var option = '<option value="' + item.id + '">' + item.name + '</option>';
          $(option).appendTo('#agent_id')
          form.render();
        })
      })

      form.render()

      form.on('select(chooseagent)', function (obj) {
        admin.get('admin/get_channels?agent_id=' + obj.value, function (res) {
          $('#channel_id').html('<option value="">请选择渠道商</option>');
          res.data.forEach(function (item) {
            var option = '<option value="' + item.id + '">' + item.name + '</option>';
            $(option).appendTo('#channel_id')
            form.render();
          })
        })
      })

      form.on('submit(form_create)', function (data) {
        var loading = layer.load();
        var obj = data.field;

        if (Object.keys(this_file_data).length === 0) {
          layer.close(loading);
          layer.alert("请上传导入文件！");
          return false;
        }
        obj.file_data = JSON.stringify(this_file_data);
        admin.post('admin/user_import', obj, function (res) {
          if (res.code != 0) {
            layer.alert(res.msg);
            layer.close(loading);
          } else {
            layer.alert('操作成功');
            layer.close(loading);
          }
          return false;

        })
        return false;
      })
    })
  }
</script>
